<script setup lang="ts">
import headerForm from './header.form.vue'
import fuwei from './model/fuwei.vue'
import caijiqi from './model/caijiqi.vue'
import gprs1 from './model/gprs1.vue'
import gprs2 from './model/gprs2.vue'
import fanganpeizhi from './model/fanganpeizhi.vue'
import duibi from './model/duibi.vue'
import shengji from './model/shengji.vue'
import lanya from './model/lanya.vue'
import type { DeviceRow } from '@/api/modules/types/document'
import { DeviceType } from '@/utils/dataHook/devices'
import useKeepAliveStore from '@/store/modules/keepAlive'
import { repaceUrl } from '@/utils'

const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name !== 'document-device-list') {
    keepAliveStore.remove('DocumentDeviceList')
  }
})

const route = useRoute()
const deviceInfo: DeviceRow = JSON.parse(sessionStorage.getItem('deviceInfo') || '{}')

const deviceId = ref<string>(route.params.id as string)

const tabList = [
  {
    name: '复位',
    component: fuwei,
  },
  {
    name: '采集器',
    component: caijiqi,
  },
  {
    name: 'GPRS1模块',
    component: gprs1,
  },
  {
    name: 'GPRS2模块',
    component: gprs2,
  },
  {
    name: '方案配置',
    component: fanganpeizhi,
  },
  {
    name: '互感器',
    component: duibi,
  },
  {
    name: '升级',
    component: shengji,
  },
  {
    name: '蓝牙',
    component: lanya,
  },
]
const current = ref(tabList[0].name)
function currentChange(val: any) {
  if (val.ObjID && val.type === DeviceType.Electric) {
    repaceUrl(`/document/device/detail/${val.ObjID}`)
    deviceId.value = val.ObjID
  }
}
</script>

<template>
  <PageMain>
    <div class="flex">
      <div class="mr-20px w-300px flex-shrink-0 b-r-1px b-r-#EBEEF5 b-r-solid pr-10px">
        <EntDeviceTree :ent-id="deviceInfo.EntObjID" :device-id="deviceId" @current-change="currentChange" />
      </div>
      <div class="flex-grow-1">
        <headerForm class="mb-10px" :device-id="deviceId" />
        <el-tabs :key="deviceId" v-model="current" class="tab-bar">
          <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.name" lazy>
            <component :is="item.component" :device-id="deviceId" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </PageMain>
</template>
